/**
* 描述：企业注册页面
*/
<style lang="scss" scoped>
  @import 'style/style';
  @import 'src/styles/company/common';
  @import 'src/styles/common';
  @import 'src/styles/icons';
  @import 'src/styles/company/index';
  .fade-enter-active {
    transition: all .5s
  }
  .fade-enter, .fade-leave-active {
    opacity: 0;
    transform: rotate( -70deg ) translateX( 300px );
  }
  .avatar-uploader{
    width:70px;
    height: 70px;
    border-radius: 70px;
    background: #f9f9f9;
    padding: 11px 18px;
    margin-left: 30px;
    float: left;
    margin-right:50px;
  }
  .avatar-uploader .el-upload {
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .tips{
    float: left;
    color: #999999;
  }
  .changeBtn{
    width: 330px;height: 50px;font-size: 18px;text-align: center;margin:0 auto;display: block;
  }
  .zc-comLogoUpload{
    width: 70px;
    height: 70px;
    margin:0;
    -moz-border-radius: 70px; /* Firefox */
    -webkit-border-radius: 70px; /* Safari 和 Chrome */
    border-radius: 70px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
    behavior: url('/static/style/ie-css3.htc'); /* 通知IE浏览器调用脚本作用于'box'类 */
  }
</style>
<template>
  <div class="main-login" style="overflow-y: auto;">
    <div class="l-login-headerTop">
      <div class="l-inner clearfix">
        <div class="logo fl">
          <img src="/static/images/web/company/wzlogo.png" width="70" height="78" alt="微职">
          <i class="name">微职-最贴心的校园招聘平台</i>
          <div class="clear"></div>
        </div>
        <div class="fr" style="margin-top:32px;">
            <span class="fl">
              <i class="iconCom iconCom_index02"></i>
              <i class="font">政府合作</i>
              <div class="clear"></div>
            </span>
          <span class="fl">
              <i class="iconCom iconCom_index01"></i>
              <i class="font">城市代理</i>
              <div class="clear"></div>
            </span>
          <span class="fl">
                <i class="iconCom iconCom_index03"></i>
                <i class="font">手机微职</i>
                <div class="clear"></div>
            </span>
          <span class="fl">
                <i class="iconCom iconCom_index04"></i>
                <i class="font">企业服务</i>
                <div class="clear"></div>
            </span>
          <div class="clear"></div>
        </div>
      </div>
    </div>
    <div class="registerForm cccShadow">
        <div class="register-step" v-show="isRegisterShow===3">
          <div class="title">企业注册</div>
          <el-form ref="formData1" :model="formData1" label-width="110px" :rules="rules1">
            <el-form-item label="个人头像" :required="true">
              <el-upload
                class="avatar-uploader"
                style="padding:0;"
                name="image"
                action="/api/pub/image"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :on-error="handleAvatarError">
                <img v-if="formData1.avatar" :src="`/api/pub/image/${formData1.avatar}`" class="iconCom_unlpadMax zc-comLogoUpload">
                <i v-else class="iconCom iconCom_unlpadMax" style="margin: 16px 18px;"></i>
              </el-upload>
              <span class="tips" style="line-height: 26px;font-size:12px;">
                    建议使用招聘者真实头像提示真实性、专业性 <br>支持jpg、jpeg、gif、png，小于10MB
              </span>
              <div class="clear"></div>
            </el-form-item>
            <el-form-item label="姓名" prop="realName">
              <el-input v-model="formData1.realName" placeholder="请输入你工作中的称呼"></el-input>
            </el-form-item>
            <el-form-item label="手机帐号" prop="phone">
              <el-input v-model="formData1.phone" placeholder="手机帐号"></el-input>
            </el-form-item>
            <el-form-item label="图片验证" prop="captcha">
              <Row>
                <Col span="11"><el-input v-model="formData1.captcha" placeholder="请输入图片验证"></el-input></Col>
                <Col span="5"><a @click="rndNum()" style="font-size: 12px;margin-top:12px;margin-left:10px;display: block;"> 点击刷新</a></Col>
                <Col span="8">
                  <p><img :src="`/api/pub/captcha.jpg?randKey=${code}`" style="width: 100%"></p>
                </Col>
              </Row>
            </el-form-item>
            <el-form-item label="手机验证码" prop="smsCode">
              <Row>
                <Col span="15">
                  <el-input v-model="formData1.smsCode" placeholder="手机验证码"></el-input>
                </Col>
                <Col span="1">&nbsp;
                </Col>
                <Col span="8" style="text-align: right">
                  <Button type="primary" :loading="phoneFunLoading" @click="sendSmsCode" style="width: 100%;line-height: 26px;height:40px;">
                    <span v-if="!phoneFunLoading">发送验证码</span>
                    <span v-else>{{countDown}}后重新发送</span>
                  </Button>
                </Col>
              </Row>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="formData1.password" placeholder="密码6-20位，必须同时含有数字、字母"></el-input>
            </el-form-item>
            <el-form-item label="职位" :required="true">
              <el-input v-model="formData1.job" placeholder="请填写当前公司的任职职位"></el-input>
            </el-form-item>
            <el-form-item label="接收简历邮箱" prop="resumeEmail">
              <el-input v-model="formData1.resumeEmail" placeholder="请输入常用邮箱"></el-input>
            </el-form-item>
          </el-form>
          <Button type="primary" class="changeBtn" @click="submission('formData1')" :loading="formData3Loading">提交审核</Button>
          <!--<Button type="primary" class="changeBtn" @click="firstStepNext('formData1')">下一步</Button>-->
          <div class="zcTz"><i>已有账号，</i><a href="#" @click="clickRegister">直接登录 </a><i class="iconCom iconCom_index05"></i><div class="clear"></div></div>
        </div>
        <div class="register-step" v-show="isRegisterShow===1">
          <div class="title">企业注册</div>
          <el-form ref="formData2" :model="formData2" label-width="100px" :rules="rules2">
            <el-form-item label="公司全称" prop="fullName">
              <el-input v-model="formData2.fullName" placeholder="请填写与营业执照名称/劳动合同、公司发票抬头一致的公司全称"></el-input>
            </el-form-item>
            <el-form-item label="公司logo">
              <el-upload
                class="avatar-uploader"
                style="padding:0;"
                action="/api/pub/image"
                name="image"
                :show-file-list="false"
                :on-success="handleAvatarSuccess1"
                :before-upload="beforeAvatarUpload"
                :on-error="handleAvatarError">
                <img v-if="formData2.logo" :src="`/api/pub/image/${formData2.logo}`" class="iconCom_unlpadMax zc-comLogoUpload">
                <i v-else class="iconCom iconCom_unlpadMax" style="margin: 16px 18px;"></i>
              </el-upload>
              <span class="tips" style="line-height: 26px;font-size:12px;">
                    提示：上传清晰的公司logo提升公司形象。<br>要求：不能为二维码、营业执照、环境图、人物图像等<br>格式：支持jpg、jpeg、gif、png，小于10MB
                  </span>
              <div class="clear"></div>
            </el-form-item>
            <el-form-item label="公司简称" prop="name">
              <el-input v-model="formData2.name" placeholder="请填写全称简写或者主要产品名称简写（例如：平安集团）"></el-input>
            </el-form-item>
            <el-form-item label="行业领域" prop="industry">
              <el-select v-model="formData2.industry" placeholder="行业领域" style="width:100%;">
                <el-option v-for="item in industryList" :value="item.id" :key="item.id" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所在城市" prop="cityId">
              <el-select v-model="formData2.cityId" clearable  filterable placeholder="所在城市" style="width:100%;" @change="changeCity(formData2.cityId)">
                <el-option v-for="item in cityList" :value="item.id" :key="item.id" :label="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="地区" prop="districtId">
              <el-select v-model="formData2.districtId" clearable  filterable placeholder="地区" style="width:100%;">
                <el-option v-for="item in districtList" :value="item.id" :key="item.id" :label="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="公司地址" prop="address">
              <el-input v-model="formData2.address" placeholder="请输入公司详细地址"></el-input>
            </el-form-item>
            <el-form-item label="公司经纬度" prop="lngLat">
              <el-input v-model="formData2.lngLat" placeholder="公司经纬度" :disabled="true">
                <template slot="append"><i class="el-icon-location-outline" style="cursor: pointer" @click="mapShow=true"></i></template>
              </el-input>
            </el-form-item>
            <el-form-item label="公司规模" prop="size">
              <el-select v-model="formData2.size" placeholder="发展阶段" style="width:100%;">
                <el-option v-for="item in companyScaleList" :value="item.id" :key="item.id" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发展阶段" prop="devStage">
              <el-select v-model="formData2.devStage" placeholder="发展阶段" style="width:100%;">
                <el-option v-for="item in capitalStageList" :value="item.id" :key="item.id" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="营业证编号" prop="businessCode">
              <el-input v-model="formData2.businessCode" placeholder="企业营业证编号"></el-input>
            </el-form-item>
            <el-form-item label="企业官网" prop="url">
              <el-input v-model="formData2.url" placeholder="企业官网"></el-input>
            </el-form-item>
            <el-form-item label="员工福利" prop="talentWelfare">
              <el-input v-model="formData2.talentWelfare" placeholder="员工福利"></el-input>
            </el-form-item>
            <el-form-item label="企业诱惑" prop="temptation">
              <el-input type="textarea" v-model="formData2.temptation" placeholder="企业诱惑"></el-input>
            </el-form-item>
            <el-form-item label="企业简介" prop="description">
              <el-input type="textarea" v-model="formData2.description" placeholder="企业简介"></el-input>
            </el-form-item>
          </el-form>
          <div style="width:430px;margin:0 auto;">
            <Button type="primary" class="changeBtn" @click="firstStepNext('formData2')">下一步</Button>
            <div class="clear"></div>
          </div>
        </div>
        <div class="register-step" v-show="isRegisterShow===2">
          <div class="title">招聘身份审核</div>
          <el-form ref="formData3" :model="formData3" label-width="100px">
            <el-form-item label="姓名" style="margin-bottom: 0px;">{{formData1.realName}}</el-form-item>
            <el-form-item label="公司职位" style="margin-bottom: 0px;">{{formData1.job}}</el-form-item>
            <el-form-item label="公司名称" style="margin-bottom: 0px;">{{formData2.fullName}}</el-form-item>
            <el-form-item label="公司简称" style="margin-bottom: 0px;">{{formData2.name}}</el-form-item>
            <el-form-item label="手持身份证照">
              <el-upload
                class="upload-demo"
                drag
                name="image"
                action="/api/pub/image"
                :show-file-list="false"
                :on-success="handleAvatarSuccess2"
                :before-upload="beforeAvatarUpload"
                :on-error="handleAvatarError">
                <div v-if="!formData3.idCardPicName">
                  <i class="iconCom iconCom_unlpadMax" style="margin-left: 160px;margin-top: 50px;"></i>
                  <div class="clear"></div>
                  <div class="el-upload__text">格式：支持jpg、jpeg、gif、png，小于10MB</div>
                </div>
                <div v-else style="margin-top:70px;" class="el-upload__text">{{formData3.idCardPicName}}
                  <div>*点击可再次上传</div>
                </div>
              </el-upload>
              <div style="line-height: 20px;font-size: 12px;color: #999999;"> 请确保身份证置于胸前拍照，正脸与身份证信息均在照片内可识别 </div>
            </el-form-item>
            <el-form-item label="上传营业执照">
              <el-upload
                class="upload-demo"
                drag
                name="image"
                action="/api/pub/image"
                :show-file-list="false"
                :on-success="handleAvatarSuccess3"
                :before-upload="beforeAvatarUpload"
                :on-error="handleAvatarError">
                <div v-if="!formData3.businessPicName">
                  <i class="iconCom iconCom_unlpadMax" style="margin-left: 160px;margin-top: 50px;"></i>
                  <div class="clear"></div>
                  <div class="el-upload__text">格式：支持jpg、jpeg、gif、png，小于10MB</div>
                </div>
                <div v-else style="margin-top:70px;" class="el-upload__text">{{formData3.businessPicName}}
                  <div>*点击可再次上传</div>
                </div>
              </el-upload>
              <div style="line-height: 20px;font-size: 12px;color: #999999;">确保公司全称与提交认证／审核公司一致；<br>如为复印件、黑白扫描件，需加盖公司公章；<br>不支持屏幕截图或翻拍图片；<br>不能有与拉勾招聘无关的标注或水印；<br>不支持电子版营业执照，信息需清晰完整；</div>
            </el-form-item>
          </el-form>
          <div style="width:430px;margin:0 auto;">
            <Button type="primary" class="changeBtn" @click="isRegisterShow=1" style="width:200px;float: left;margin-right:30px;">返回上一步</Button>
            <Button type="primary" class="changeBtn" @click="secondStepNext('formData2')" style="width:200px;float: left;background: #f7f7f7;color: #666;border:0;">建立公司</Button>
            <div class="clear"></div>
          </div>
        </div>
    </div>
    <!-- 弹出层 -->
    <map-modal :title="`选择经纬度`" :cityCode="this.formData2.cityId" :styles="{width: '666px'}" transition="zoomDown"
               v-on:getLngLat="getLngLat" v-model="mapShow"></map-modal>
  </div>
</template>
<script>
  import { industry } from '@/service/company/enterpriseInfo/enterpriseInfoMService';
  import { companyRegister } from '@/service/company/login/loginMService';
  import { sendSmsCode } from '@/service/web/login/loginService';
  import { district, districtByCityId, capitalStage, companyScale } from '@/service/company/selectService/selectMService';
  import $ from 'jquery';
  import mapModal from '@/components/common/modal/mapModal';
  export default {
    components: {
      mapModal
    },
    data () {
      return {
        formLoading: false,
        isRegisterShow: 1, // 显示模块
        formData1: {
          avatar: ''
        },
        rules1: {
          realName: [
            {required: true, message: '请输入你工作中的称呼', trigger: 'blur change'}
          ],
          smsCode: [
            {required: true, message: '手机验证码不能为空！', trigger: 'blur change'}
          ],
          captcha: [
            {required: true, message: '图片验证不能为空！', trigger: 'blur change'}
          ],
          password: [
            {required: true, message: '密码不能为空', trigger: 'blur change'},
            {pattern: '^(?![0-9]+$)(?![a-zA-Z]+$)[,.#%’+*-:;^_`0-9A-Za-z]{6,20}$', message: '密码6-20位，必须同时含有数字、字母', trigger: 'blur change'}
          ],
          phone: [
            {required: true, message: '手机号不能为空', trigger: 'blur'},
            {pattern: '^(1[3,4,5,6,7,8])\\d{9}$', message: '手机号格式不对', trigger: 'blur change'}
          ],
          resumeEmail: [
            {pattern: '^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\\.[a-zA-Z0-9_-]{2,3}){1,2})$', message: '邮箱格式不正确', trigger: 'blur change'}
          ]
        },
        formData2: {
          logo: ''
        },
        rules2: {
          fullName: [
            {required: true, message: '请填写公司全称', trigger: 'blur change'}
          ],
          name: [
            {required: true, message: '公司简称不能为空', trigger: 'blur change'}
          ],
          industry: [
            {required: true, type: 'number', message: '行业领域不能为空', trigger: 'blur change'}
          ],
          cityId: [
            {required: true, type: 'number', message: '城市不能为空', trigger: 'blur change'}
          ],
          districtId: [
            {required: true, type: 'number', message: '地区不能为空', trigger: 'blur change'}
          ],
          lngLat: [
            {required: true, message: '经纬度不能为空', trigger: 'blur change'}
          ],
          address: [
            {required: true, message: '详细地址不能为空', trigger: 'blur change'}
          ],
          size: [
            {required: true, type: 'number', message: '公司规模不能为空', trigger: 'blur change'}
          ],
          devStage: [
            {required: true, type: 'number', message: '发展阶段不能为空', trigger: 'blur change'}
          ],
          businessCode: [
            {required: true, message: '企业营业证编号不能为空', trigger: 'blur change'}
          ],
          description: [
            {required: true, message: '企业简介不能为空', trigger: 'blur change'}
          ]
        },
        formData2Loding: false,
        formData3: {
          idCardPicName: '',
          businessPicName: ''
        },
        formData3Loading: false,
        imageUrl: null,
        industryList: [], // 行业集合
        cityList: [], // 城市集合
        districtList: [], // 区县集合
        capitalStageList: [], // 查询企业融资阶段字典
        companyScaleList: [], // 查询企业规模字典
        accept: ['image/jpeg', 'image/png'], // 上传图片验证格式
        countDown: 60, // 倒计时初始值
        countDownIntervalid: null, // 倒计时定时器
        phoneFunLoading: false, // 验证码loading
        code: '',
        captcha: '',
        loading: false,
        mapShow: false
      };
    },
    mounted () {
      this.rndNum();
      this.getIndustryList();
      this.getAllCityList();
      this.getCurrentLocal();
    },
    methods: {
      // 直接登录
      clickRegister () {
        this.$router.push('/company/login');
      },
      // 文件上传成功 - 个人头像
      handleAvatarSuccess (res) {
        this.formLoading = false;
        if (res.error === 'INTERNAL_EXCEPTION') {
          this.$Notice.info({title: '上传图片超时，请稍后再试!'});
          this.formData1.avatar = '';
          return;
        }
        this.formData1.avatar = res.data.ossKey;
        this.$set(this.formData1, 'avatar', res.data.ossKey);
        this.$Notice.success({title: '上传成功'});
      },
      // 文件上传成功 - 企业logo
      handleAvatarSuccess1 (res) {
        this.formData2Loding = false;
        if (res.error === 'INTERNAL_EXCEPTION') {
          this.$Notice.info({title: '上传图片超时，请稍后再试!'});
          this.formData2.logo = '';
          return;
        }
        this.formData2.logo = res.data.ossKey;
        this.$Notice.success({title: '上传成功'});
      },
      // 文件上传成功 - 上传营业执照
      handleAvatarSuccess2 (res) {
        this.formLoading = false;
        this.formLoading = false;
        if (res.error === 'INTERNAL_EXCEPTION') {
          this.$Notice.info({title: '上传图片超时，请稍后再试!'});
          this.formData3.idCardPicId = null;
          this.formData3.idCardPicName = '';
          return;
        }
        this.formData3.idCardPicId = res.data.id;
        this.formData3.idCardPicName = res.data.displayName;
        this.$Notice.success({title: '上传成功'});
      },
      // 文件上传成功 - 上传营业执照
      handleAvatarSuccess3 (res) {
        this.formLoading = false;
        this.formLoading = false;
        if (res.error === 'INTERNAL_EXCEPTION') {
          this.$Notice.info({title: '上传图片超时，请稍后再试!'});
          this.formData3.businessPicId = null;
          this.formData3.businessPicName = '';
          return;
        }
        this.formData3.businessPicId = res.data.id;
        this.formData3.businessPicName = res.data.displayName;
        this.$Notice.success({title: '上传成功'});
      },
      // 文件上传前
      beforeAvatarUpload (file) {
        const isJPG = this.accept.indexOf(file.type) > -1;
        const isLt100K = file.size / 1024 < 100;
        if (!isJPG) {
          this.$Notice.warning({
            title: '上传图片格式错误',
            desc: '上传图片格式只能为jpg, jpeg, png'
          });
        }
        if (!isLt100K) {
          this.$Notice.warning({
            title: '上传图片过大',
            desc: '上传图片大小不能超过100k'
          });
        }
        if (isJPG && isLt100K) {
          this.formLoading = true;
          this.formData2Loding = true;
        }
        return isJPG && isLt100K;
      },
      // 图片上传失败
      handleAvatarError () {
        this.formLoading = false;
        this.$Notice.warning({title: '上传失败，请稍后再试'});
      },
      // 获取字典数据
      async getIndustryList () {
        let result = await industry();
        this.industryList = result.data;
        let result1 = await capitalStage();
        this.capitalStageList = result1.data;
        let result2 = await companyScale();
        this.companyScaleList = result2.data;
      },
      // 第一步下一步
      firstStepNext (formName) {
        // if (!this.formData1.avatar) {
        //   this.$Notice.warning({title: '上传个人头像！'});
        //   return;
        // }
        // this.$refs[formName].validate((valid) => {
        //   if (valid) {
        //     this.isRegisterShow = 2;
        //     this.formData2Loding = false;
        //   } else {
        //     this.$Notice.warning({title: '请将信息填写完整！'});
        //   }
        // });
        if (!this.formData2.logo) {
          this.$Notice.warning({title: '请上传企业logo！'});
          return;
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.isRegisterShow = 2;
            this.formData2Loding = false;
          } else {
            this.$Notice.warning({title: '请将信息填写完整！'});
          }
        });
      },
      // 第二步
      secondStepNext () {
        if (!this.formData3.idCardPicId) {
          this.$Notice.warning({title: '上传手持身份证照！'});
          return;
        }
        if (!this.formData3.businessPicId) {
          this.$Notice.warning({title: '上传营业执照！'});
          return;
        }
        this.isRegisterShow = 3;
      },
      // 提交
      async submission (formName) {
        if (!this.formData1.avatar) {
          this.$Notice.warning({title: '上传个人头像！'});
          return;
        }
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            try {
              let object1 = Object.assign(this.formData1, this.formData2);
              let object2 = Object.assign(object1, this.formData3);
              this.formData3Loading = true;
              await companyRegister(object2);
              this.$Notice.success(
                {
                  title: '提交成功',
                  desc: '工作人员会在1-2个工作日内审核完成'
                }
              );
              this.formData3Loading = false;
              this.$router.push('/company/login');
            } catch (e) {
              this.isRegisterShow = 1;
              this.formData1.smsCode = null;
              this.formData1.captcha = null;
              this.rndNum();
              this.formData3Loading = false;
              console.log(e);
            }
          } else {
            this.$Notice.warning({title: '请将信息填写完整！'});
          }
        });
      },
      // 发送验证码
      async sendSmsCode () {
        if (!this.formData1.phone) {
          this.$Notice.info({title: '请输入手机号'});
          return;
        }
        if (!this.formData1.captcha) {
          this.$Notice.info({title: '请输入图片验证码'});
          return;
        }
        this.phoneFunLoading = true;
        try {
          await sendSmsCode({phone: this.formData1.phone}, {randKey: this.code, captcha: this.formData1.captcha}); // 获取短信验证码接口
          this.$Notice.success({title: '发送成功'});
          this.countDownIntervalid = setInterval(() => {
            if (this.countDown <= 0) {
              this.phoneFunLoading = false;
              this.countDown = 60;
              clearInterval(this.countDownIntervalid);
            } else {
              this.countDown = this.countDown - 1;
            }
          }, 1000);
        } catch (e) {
          this.phoneFunLoading = false;
        }
      },
      // 生成随机数 5位 即 随机生成图片
      rndNum () {
        let xxx = Math.random().toString(36).substr(2);
        let aa = xxx.slice(0, 5);
        this.code = aa;
      },
      // 获取全国城市集合
      async getAllCityList () {
        let result = await district({type: 10});
        this.cityList = result.data;
      },
      // 根据城市查询区
      async changeCity (code) {
        this.districtList = [];
        if (!code) return;
        let result = await districtByCityId({cityId: code});
        this.districtList = result.data;
      },
      // 获取当前定位
      getCurrentLocal () {
        let apiConv = `http://restapi.amap.com/v3/ip` +
          `?key=09fc21a01b861edccad8027462452966&output=JSON`;
        $.getJSON(apiConv, (data) => {
          if (data.status === 0) {
            this.$Notice.info({title: '定位失败，请选择城市！'});
            return;
          }
          this.formData2.cityId = Number(data.adcode);
          this.changeCity(this.formData2.cityId);
        });
      },
      getLngLat (getLngLat) {
        this.formData2.longitude = getLngLat.lng;
        this.formData2.latitude = getLngLat.lat;
        if (this.formData2.longitude) {
          this.formData2.lngLat = this.formData2.longitude + ',' + this.formData2.latitude;
        } else {
          this.formData2.lngLat = null;
        }
      }
    }
  };
</script>
